<template>
  <div class="login-container">
    <div class="login-weaper animated bounceInDown">
      <p class="login-tip">{{ website.title }}</p>
      <div class="login-border">
        <div class="login-main">
                    <el-tabs
                        v-model="activeName"
                        class="login-tabs"
                    >
                      <el-tab-pane
                          label="密码登录"
                          name="user"
                      >
                        <Userlogin v-if="activeName === 'user'" />
                      </el-tab-pane>
                      <el-tab-pane
                          label="短信登录"
                          name="code"
                      >
                        <Codelogin v-if="activeName === 'code'" />
                      </el-tab-pane>
                    </el-tabs>
          <div >
        </div>
      </div>
      </div>
    </div>
    <div class="login-copyright">
      {{ website.copyright }}
    </div>

  </div>
</template>

<script setup lang='ts'>
import Userlogin from "views/Login/components/userlogin.vue";
import Codelogin from "views/Login/components/codelogin.vue";

import {reactive, computed,ref} from 'vue';
import {useStore} from "vuex"

const store = useStore()
const {getters} = store
const website = computed(() => getters['website'])

const activeName = ref('user')
</script>

<style lang='scss'>
@import '@/styles/login.scss';
</style>
